/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="">
		<IndexHead :config='pageConfig'></IndexHead>
		<view  class="order-list"   >
			<!-- <view class="order-item" @click="openType" :class="tipIndex == 0? 'order-item-active':''">
				<view style="display: flex;flex-direction: row;justify-content: center;">
					<text class="level" >全部商品</text>
					<view  :class="showType?'sanjiao-d':'sanjiao'" ></view>
				</view>
				<view class="order-line" :class="typeId > 1 ? 'active':''"></view>
			</view> -->
			<view class="order-item" :class="tipIndex == 0 ? 'order-item-active':''">
				<text @click="chooseTip(0)">全部商品</text>
				<view class="order-line"  :class="tipIndex == 0? 'active':''"></view>
			</view>
			<view class="order-item" :class="tipIndex == 1 ? 'order-item-active':''">
				<text @click="chooseTip(1)">平台自营</text>
				<view class="order-line"  :class="tipIndex == 1? 'active':''"></view>
			</view>
			<view class="order-item" :class="tipIndex == 2 ? 'order-item-active':''">
				<text @click="chooseTip(2)">个体自营</text>
				<view class="order-line"  :class="tipIndex == 2 ? 'active':''"></view>
			</view>
			<view class="order-item" :class="tipIndex == 3 ? 'order-item-active':''">
				<text @click="chooseTip(3)">景区自营</text>
				<view class="order-line"  :class="tipIndex == 3 ? 'active':''"></view>
			</view>
		</view>
		<view class="type" v-if="showType">
			<view class='type-list'>
				<view class="type-item" @click="chooseType(index)" :class=" typeId == index ? 'type-item-ac' : '' " v-for="(item,index) in typeData" :key='index'>
					{{item.type}}
				</view>
			</view>
		</view>
	<!-- 商品内容 -->
		<view class="goods-list">
			<view class="goods-item" v-for='(item,index) in goodsData' :key='index' >
				<view class="other-btn" @click="openMask(index)">
					<view class="other-btn-dot"></view><view class="other-btn-dot"></view><view class="other-btn-dot"></view>
				</view>
				<view class="item-btns" v-if="openIndex == index">
					<view class="item-btn">
						<image src="/static/nolike.png"></image>
						<text>不感兴趣</text>
					</view>
					<view class="item-btn">
						<image src="/static/pingbi.png"></image>
						<text>屏蔽:扇子</text>
					</view>
					<view class="item-btn">
						<image src="/static/bushi.png"></image>
						<text>图片引起不适</text>
					</view>
					<view class="item-btn">
						<text>找同款</text>
					</view>
				</view>
				<view><image class="item-img" @click="toDetail()" :src="item.img"></image>
				<text class="title" @click="toDetail()">
					<text class="biaoQian">{{item.biaoQian}}</text>
					{{item.title}}
				</text>
				<text class="prize" @click="toDetail()"><text class="p-dot">￥</text>{{item.prize}}<text class="p-dot">{{item.prizeD}}</text></text>
				<text class="buyNum" @click="toDetail()">{{item.buyNum}}人付款</text></view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				levelNum:0,
				typeId:0,
				showType:false,
				tipIndex :0,
				pageConfig:{
					common:{
						hasSearch:false, //显示整版搜索框
						hasTitle:false, //显示页面title
						hasMenu:false,
						hasSearchMid2:true,
						headHeight:200,
						fixBg:false
					},
					left:{
						img:'/static/pos-home.png' , //左侧图标
						text:'沈阳市', //左侧文字
						showPos:false,
					},
					mid:{
						title:'' ,//页面title
						rtext:'',
						showAddIcon:true, //是否显示右侧icon
						rightIco:'/static/msg.png'//右侧图标地址
					},
					
				},
				goodsData:[
					{
						title:'宫廷古风中国风口红 长相思持久保湿防水',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:123123,
						biaoQian:'平台自营'
					},
					{
						title:'国粹京剧脸谱戏曲Q版人物吊坠书签金属创意古风',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:1223,
						biaoQian:'平台自营'
					},
					{
						title:'中国特色礼物送老外北京特色工艺品京剧脸谱摆件商务外事出国礼品',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:1564,
						biaoQian:'平台自营'
					},
					{
						title:'砚台天然原石 复刻故宫博物院款式 松花砚',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:2333,
						biaoQian:'个体自营'
					},
					{
						title:'砚台天然原石 复刻故宫博物院款式 松花砚',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:2333,
						biaoQian:'平台自营'
					},
					{
						title:'砚台天然原石 复刻故宫博物院款式 松花砚',
						img:'/static/banner.png',
						prize:'69.',
						prizeD:'5',
						buyNum:2333,
						biaoQian:'景区自营'
					}
				],
				typeData:[
					{
						type:"全部类目",
						id:0
					},
					{
						type:"女装",
						id:0
					},
					{
						type:"口红",
						id:0
					},
					{
						type:"箱包皮具",
						id:0
					},
					{
						type:"数码配件",
						id:0
					},
					{
						type:"家具饰品",
						id:0
					},
					{
						type:"收纳整理",
						id:0
					},
					{
						type:"男装",
						id:0
					}
				]
			
			}
		},
		methods: {
			
			openType(){
				this.showType = !this.showType
			},
			chooseType(index){
				this.typeId = index
			},
			chooseTip(index){
				this.tipIndex = index
				if(this.showType){
					this.showType = !this.showType
				}
			},
			findSame(){
				uni.navigateTo({
					url:'sameAs'
				})
			}
		},
		created(){
			
		}
	}
</script>

<style scoped>
	.order-list{
		width: 100%;
		margin-top: -40upx;
		position: absolute;
		display: flex;
		flex-direction: row;
	}
	.order-item{
		width: 25%;
		height: 45upx;
		text-align: center;
		
	}
	.order-item text{
		width: 100%;
		display: block;
		color: #0075EE;
		line-height: 30upx;
		font-size: 26upx;
		text-align: center;
	}
	.order-item-active text{
		font-size: 28upx;
		line-height: 30upx;
		font-weight: bold;
	}
	
	.order-item .level{
		text-align: right;
		padding-right: 6upx;
	}
	.order-item .level-t{
		text-align: center;
	}
	.sanjiao{
		width: 0upx;
		height: 0upx;
		/* background: #55A0FF; */
		float: right;
		margin-right: 0;
		border: 10upx solid transparent;
		border-top-color: #55A0FF;
		margin-top: 10upx;
		margin-left: 5%;
	}
	.sanjiao-d{
		width: 0upx;
		height: 0upx;
		/* background: #55A0FF; */
		float: right;
		margin-right: 0;
		border: 10upx solid transparent;
		border-top-color: #55A0FF;
		margin-top: 0upx;
		margin-left: 5%;
		transform: rotate(180deg);
		
	}
	.order-line{
		width: 120upx;
		height: 3upx;
		margin-top:8upx;
		background: #FFFFFF;
		margin-left: auto;
		margin-right: auto;
		
	}
	.active{
		background: -webkit-linear-gradient(left, #8EC6FF,#6592F7);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #8EC6FF,#6592F7);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #8EC6FF,#6592F7);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #8EC6FF,#6592F7);
		/* 标准的语法 */
	}
	.type{
		width: 700upx;
		height: auto;
		background: #FFFFFF;
		padding: 25upx;
		position: absolute;
		z-index: 30;
	}
	.type-list{
		width: 700upx;
		height: auto;
	}
	.type-item{
		width: 300upx;
		height: 38upx;
		background: #F8F6F7;
		color: #666666;
		padding: 20upx;
		text-align: left;
		line-height: 38upx;
		font-size: 28upx;
		margin-top: 18upx;
	}
	.type-item:nth-child(odd){
		float: left;
	}
	.type-item:nth-child(even){
		float: right;
	}
	.type-item-ac{
		background: #DFEDFD;
		color: #1D7EEF;
	}
	
	/* 商品内容 */
	
	.goods-list{
		width: 710upx;
		margin-left: 20upx;
		margin-right: 20upx;
		height: calc(100vh - 130px);
		overflow: scroll;
		
		/* margin-bottom: 60upx; */
		/* display: table; */
	}
	.list-title{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		height: 8vw;
		margin-top: 3vh;
	}
	.list-title span{
		font-size: 4.5vw;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.goods-item{
		width: 338upx;
		height: 515upx;
		margin-top: 24upx;
		position: relative;
	}
	.goods-item:nth-child(even){
		float: left;
	}
	.goods-item:nth-child(odd){
		float: right;
	}
	.goods-item .item-img{
		width: 338upx;
		height: 336upx;
		border-radius: 15upx 15upx 0 0;
	}
	.goods-item .title{
		padding-left: 22upx;
		padding-right: 22upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-family: PingFang SC Regular;
		font-size: 26upx;
	}
	.prize{
		height: 38upx;
		color: #55A0FF;
		float: left;
		font-size: 30upx;
		margin-top: 50upx;
		margin-left: 24upx;
		text-align: left;
	}
	.p-dot{
		font-size: 26upx;
	}
	.buyNum{
		width: 200upx;
		float: right;
		text-align: right;
		font-size: 25upx;
		color: #999999;
		margin-right: 24upx;
		margin-top: 56upx;
	}
	.other-btn{
		width: 49upx;
		height: 29upx;
		background: rgba(0,0,0,0.5);
		z-index: 10;
		right: 9upx;
		top:9upx;
		border-radius: 15upx;
		display: flex;
		flex-direction: row;
		position: absolute;
		justify-content: center;
	}
	.other-btn-dot{
		width: 6upx;
		height: 6upx;
		margin-left: 2upx;
		margin-right: 2upx;
		margin-top: 11upx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.item-btns{
		position: absolute;
		width: 338upx;
		height: 455upx;
		padding-top: 60upx;
		border-radius: 15upx;
		z-index: 8;
		background: rgba(0,0,0,0.5);
	}
	.item-btns image{
		width: 36upx;
		height: 36upx;
		margin-top: 10upx;
		margin-right: 10upx;
	}
	.item-btn{
		width: 260upx;
		height: 60upx;
		background: #FFFFFF;
		border-radius: 50upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.item-btn text{
		font-size: 26upx;
		color: #333333;
		line-height: 60upx;
	}
	.biaoQian{
		line-height: 30upx;
		color: #FFFFFF;
		padding:0 10upx;
		background: #FCCA42;
		font-size: 20upx;
		border-radius: 30upx;
		margin-right: 8upx;
	}
</style>
